<template>
  <div class="discussion-detail-container">
    <div class="flex-box">
      <div class="comment-area left-main">
        <div class="my-post view-box">
          <div class="post-area">
            <textarea
              placeholder="写点什么吧"
              rows="12"
              v-model="postContent"
              class="post-text"
            ></textarea>
            <div class="pics"></div>
          </div>
          <div class="operations">
            <ImageGallery :srcs="addedPics" type="shot" @change="handlePicChange" @delete="deletePic"></ImageGallery>
            <div @click="saveDiscussComment" class="primary-btn">确定</div>
          </div>
        </div>
        <div class="mid">共{{ comments.length }}条回复</div>
        <div class="comment-list">
          <Comment
            :comment="item"
            v-for="item in comments"
            :key="item.id"
          ></Comment>
        </div>
      </div>
      <div class="right-side">
        <div class="discussion-info view-box">
          <div class="info-main">
            <div class="title">{{ discussion.title }}</div>
            <div class="intro">{{ discussion.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "_c/Comment";
import ImageGallery from '../../../components/ImageGallery.vue';
export default {
  name: "LearnDiscussionDetailView",
  components: { Comment, ImageGallery },
  data() {
    return {
      postContent: "",
      addedPics: [],
      comments: [],
      discussion: {
        title: "讨论标题 巴洛克风格是起源于罗马的，不是意大利？",
        intro: "啊嘞的出现标志着手工艺设计阶段的开始。",
      },
    };
  },
  mounted() {
    this.getDiscussionDetail(this.$route.params.discussionId)
    this.discussCommentPage(this.$route.params.discussionId)
  },
  methods: {
    getDiscussionDetail(discussionId) {
      this.loading = true;
      this.$api
        .getDiscussionDetail({discussionId})
        .then((res) => {
          this.discussion = res.data.data
        });
    },
    discussCommentPage(discussionId){
      this.loading = true;
      this.$api
          .discussCommentPage({
            pageNow:1,
            pageSize:20,
            discussId : discussionId
          })
          .then((res) => {
            this.comments = res.data.data.rows
          });
    },

    saveDiscussComment(){
      this.loading = true
      this.$api.saveDiscussComment({
        discussId:this.$route.params.discussionId,
        content:this.postContent,
      }).then(() => {
        this.discussCommentPage(this.$route.params.discussionId)
        this.loading = false;
      });
    },


    handlePicChange(e) {
      let files = e.target.files;
      for (let file of files) {
        let url = null;
        if (window.createObjectURL != undefined) {
          // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) {
          // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
          // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        this.addedPics.push(url);
      }
    },
    deletePic(i) {
      this.addedPics.splice(i,1);
    }
  },
};
</script>

<style scoped lang="scss">
.my-post {
  margin-bottom: 20px;
  padding: 20px;
}

.mid {
  margin: 20px 0;
}
.comment-list {
  > div {
    background: #f0f0f0;
    margin: 20px 0;
  }
}

.operations {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.info-main {
  min-height: 280px;
  .title {
    margin-bottom: 20px;
  }
  .intro {
    font-size: 14px;
    color: #888;
  }
}
</style>
